<template>
  <div class="repair-handling">
    <div class="header">
      <router-link to="/main/wuye/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>维修处理</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待处理" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="location" label="报修位置" width="180">
              <template slot-scope="scope">
                {{ scope.row.location.join(' - ') }}
              </template>
            </el-table-column>
            <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
            <el-table-column prop="expectedTime" label="预计完成时间" width="180"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleRepair(scope.row)">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="处理中" name="processing">
          <el-table :data="processingList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="progress" label="处理进度" width="200">
              <template slot-scope="scope">
                <el-progress :percentage="scope.row.progress"></el-progress>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="success" @click="updateProgress(scope.row)">更新进度</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已完成" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="completionTime" label="完成时间" width="180"></el-table-column>
            <el-table-column prop="repairResult" label="维修结果" width="120">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.repairResult }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="维修详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="repair-detail" v-if="currentRepair">
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="报修编号">{{ currentRepair.repairNo }}</el-descriptions-item>
          <el-descriptions-item label="报修人">{{ currentRepair.applicant }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentRepair.phone }}</el-descriptions-item>
          <el-descriptions-item label="报修位置">{{ currentRepair.location.join(' - ') }}</el-descriptions-item>
          <el-descriptions-item label="报修类型">{{ currentRepair.repairType }}</el-descriptions-item>
          <el-descriptions-item label="紧急程度">{{ currentRepair.urgencyLevel }}</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>故障描述</h4>
          <p>{{ currentRepair.description }}</p>
        </div>

        <div class="detail-section" v-if="currentRepair.repairInfo">
          <h4>维修记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in currentRepair.repairInfo.records"
              :key="index"
              :timestamp="record.time">
              {{ record.content }}
              <p v-if="record.remark" class="repair-remark">备注：{{ record.remark }}</p>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 处理对话框 -->
    <el-dialog title="维修处理" :visible.sync="repairDialogVisible" width="40%">
      <el-form :model="repairForm" label-width="100px">
        <el-form-item label="处理状态">
          <el-radio-group v-model="repairForm.status">
            <el-radio label="开始维修">开始维修</el-radio>
            <el-radio label="暂停维修">暂停维修</el-radio>
            <el-radio label="完成维修">完成维修</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="处理进度">
          <el-slider v-model="repairForm.progress"></el-slider>
        </el-form-item>

        <el-form-item label="处理说明">
          <el-input type="textarea" v-model="repairForm.description" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="更换配件" v-if="repairForm.status === '完成维修'">
          <div class="parts-form">
            <div v-for="(part, index) in repairForm.parts" :key="index" class="part-item">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input v-model="part.name" placeholder="配件名称"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-input-number v-model="part.quantity" :min="1" placeholder="数量"></el-input-number>
                </el-col>
                <el-col :span="8">
                  <el-input-number v-model="part.price" :min="0" placeholder="单价"></el-input-number>
                </el-col>
                <el-col :span="2">
                  <el-button type="danger" icon="el-icon-delete" circle @click="removePart(index)"></el-button>
                </el-col>
              </el-row>
            </div>
            <el-button type="primary" plain icon="el-icon-plus" @click="addPart">添加配件</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="repairDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRepair">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          repairNo: 'BX202403001',
          applicant: '张三',
          phone: '13800138000',
          location: ['A栋', '1层', '101'],
          repairType: '水电维修',
          urgencyLevel: '紧急',
          description: '水管漏水',
          expectedTime: '2024-03-20 15:00:00'
        }
      ],
      processingList: [
        {
          repairNo: 'BX202403002',
          applicant: '李四',
          startTime: '2024-03-15 14:00:00',
          progress: 60,
          repairInfo: {
            records: [
              {
                time: '2024-03-15 14:00:00',
                content: '开始维修',
                remark: '已到达现场'
              },
              {
                time: '2024-03-15 14:30:00',
                content: '更换水管',
                remark: '老化严重需要更换'
              }
            ]
          }
        }
      ],
      completedList: [
        {
          repairNo: 'BX202403003',
          applicant: '王五',
          completionTime: '2024-03-14 16:30:00',
          repairResult: '已修复',
          repairInfo: {
            records: [
              {
                time: '2024-03-14 15:00:00',
                content: '开始维修',
                remark: '检查故障点'
              },
              {
                time: '2024-03-14 16:30:00',
                content: '完成维修',
                remark: '更换配件并测试正常'
              }
            ]
          }
        }
      ],
      detailDialogVisible: false,
      repairDialogVisible: false,
      currentRepair: null,
      repairForm: {
        status: '开始维修',
        progress: 0,
        description: '',
        parts: [{ name: '', quantity: 1, price: 0 }]
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentRepair = row
      this.detailDialogVisible = true
    },
    handleRepair(row) {
      this.currentRepair = row
      this.repairForm = {
        status: '开始维修',
        progress: 0,
        description: '',
        parts: [{ name: '', quantity: 1, price: 0 }]
      }
      this.repairDialogVisible = true
    },
    updateProgress(row) {
      this.currentRepair = row
      this.repairForm = {
        status: '维修中',
        progress: row.progress,
        description: '',
        parts: []
      }
      this.repairDialogVisible = true
    },
    addPart() {
      this.repairForm.parts.push({ name: '', quantity: 1, price: 0 })
    },
    removePart(index) {
      this.repairForm.parts.splice(index, 1)
    },
    submitRepair() {
      if (!this.repairForm.description) {
        this.$message.error('请填写处理说明')
        return
      }

      // TODO: 提交维修处理信息到后端
      const record = {
        time: new Date().toLocaleString(),
        content: this.repairForm.status,
        remark: this.repairForm.description
      }

      this.currentRepair.repairInfo = this.currentRepair.repairInfo || { records: [] }
      this.currentRepair.repairInfo.records.push(record)

      if (this.repairForm.status === '开始维修') {
        this.currentRepair.startTime = record.time
        this.currentRepair.progress = this.repairForm.progress
        
        // 从待处理列表移动到处理中列表
        const index = this.pendingList.findIndex(item => item.repairNo === this.currentRepair.repairNo)
        if (index > -1) {
          this.pendingList.splice(index, 1)
          this.processingList.unshift(this.currentRepair)
        }
      } else if (this.repairForm.status === '完成维修') {
        this.currentRepair.completionTime = record.time
        this.currentRepair.repairResult = '已修复'
        
        // 从处理中列表移动到已完成列表
        const index = this.processingList.findIndex(item => item.repairNo === this.currentRepair.repairNo)
        if (index > -1) {
          this.processingList.splice(index, 1)
          this.completedList.unshift(this.currentRepair)
        }
      } else {
        // 更新进度
        this.currentRepair.progress = this.repairForm.progress
      }

      this.$message.success('处理信息提交成功')
      this.repairDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-handling {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .repair-remark {
      margin: 5px 0 0;
      font-size: 13px;
      color: #909399;
    }
  }

  .parts-form {
    .part-item {
      margin-bottom: 15px;
    }
  }
}
</style> 